use yew::{function_component, html, use_reducer, use_state, Callback, Children, ContextProvider, Html, Properties, UseReducerHandle};
use yew_hooks::use_mount;
use yewdux::use_dispatch;
use crate::{WEB_SOCKET_URL};
use crate::business::app_state::AppState;
use crate::business::page::fragment::im_session_list_view::SessionListState;
use crate::business::websocket::receive_send_handle::ImReceiveSendHandle;
use crate::business::websocket::websocket_view::{ImWebSocketStatus, ImWebSocketView};

#[derive(Properties, Clone, PartialEq)]
pub struct ImReceiveSendHandleViewProps {
    pub children: Children,
}

#[function_component(ReceiveSendDataView)]
pub fn receive_send_data_view(props: &ImReceiveSendHandleViewProps) -> Html {
    let app_state = use_state(|| { AppState::new() });

    let dispatch = use_dispatch::<SessionListState>();

    let receive_send_handle: UseReducerHandle<ImReceiveSendHandle> = {
        use_reducer(move || ImReceiveSendHandle::new(dispatch))
    };

    let app_state_clone = app_state.clone();
    let receive_send_handle_clone = receive_send_handle.clone();
    use_mount(move || {
        let total = app_state_clone.total + 1;
        let websocket_status = app_state_clone.websocket_status.clone();
        let websocket_handle = receive_send_handle_clone.clone();

        app_state_clone.set(AppState {total,
            login_user_id: app_state_clone.login_user_id.clone(),
            receive_send_handle: Some(websocket_handle),
            websocket_status,
            set_data_callback: app_state_clone.set_data_callback.clone(),
            set_login_user_id_callback: app_state_clone.set_login_user_id_callback.clone(),});

        log::info!("receive_send_data view started, {:?}, {:?}", app_state_clone, app_state_clone.websocket_status);
    });

    let app_state_change = app_state.clone();
    let websocket_status_callback = Callback::from(move |im_web_socket_status: ImWebSocketStatus| {
        log::info!("receive_send_data view started, websocket status: {:?}", im_web_socket_status);
        let total = app_state_change.total + 1;
        let websocket_status = im_web_socket_status.clone();
        let receive_send_handle = app_state_change.receive_send_handle.clone();

        let app_state_clone2 = app_state_change.clone();
        let set_login_user_id_callback = Callback::from(move |user_id| {
            log::info!("login success and set login success33, {}", user_id);
            let total = app_state_clone2.total + 1;
            app_state_clone2.set(AppState {
                total,
                login_user_id: Some(user_id),
                receive_send_handle: app_state_clone2.receive_send_handle.clone(),
                websocket_status: app_state_clone2.websocket_status.clone(),
                set_data_callback: app_state_clone2.set_data_callback.clone(),
                set_login_user_id_callback: app_state_clone2.set_login_user_id_callback.clone(),
            });
        });

        let app_state_clone3 = app_state_change.clone();
        let set_data_callback = Callback::from(move |(key, value)| {
            let total = app_state_clone3.total + 1;
            app_state_clone3.set(AppState {
                total,
                login_user_id: app_state_clone3.login_user_id.clone(),
                receive_send_handle: app_state_clone3.receive_send_handle.clone(),
                websocket_status: app_state_clone3.websocket_status.clone(),
                set_data_callback: app_state_clone3.set_data_callback.clone(),
                set_login_user_id_callback: app_state_clone3.set_login_user_id_callback.clone(),
            });
        });
        let login_user_id = app_state_change.login_user_id.clone();
        
        app_state_change.set(AppState {total, login_user_id, receive_send_handle, websocket_status,
            set_login_user_id_callback: Some(set_login_user_id_callback), 
            set_data_callback: Some(set_data_callback),
        });
        log::info!("receive_send_data view started, {:?}, {}, {:?}", app_state_change, app_state_change.receive_send_handle.is_some(), app_state_change.websocket_status);
    });

    html! {
        <ContextProvider<AppState> context={ (*app_state).clone() } >
           <ImWebSocketView url= {WEB_SOCKET_URL} receive_send_handle = { receive_send_handle.clone()} websocket_status_callback={websocket_status_callback} >
              { for props.children.iter() }
           </ImWebSocketView>
        </ContextProvider<AppState >>
    }
}
